<template>
  <basic-dialog :visible="show"
                minWidth="400px"
                title="更改手机号"
                :isShowClose="true"
                :isFullScreen="false"
                is-show-basic-footer
                @submit="submit"
                @close="$emit('close')">
    <q-form ref="form" class="dialog-content">
      <div class="padding-t-20 padding-l-20 padding-r-20" v-if="isPass">
        <div class="margin-b-10" style="padding-left: 10px">为了确认本人操作，请输入登录密码</div>
        <q-input
          :type="isNewPwd ? 'password' : 'text'"
          v-model="ruleForm.password"
          placeholder="请输入密码"
          dense
          outlined
          :rules="[
              val => val.length >= 6 && val.length <= 20 || '请输入6-20位密码'
          ]"
        >
          <template v-slot:before>
            <label class="text-right name form-name label-width" >
              <span class="text-red">*</span><span>登录密码:</span>
            </label>
          </template>
          <template v-slot:append>
            <q-icon
              :name="isNewPwd ? 'visibility_off' : 'visibility'"
              class="cursor-pointer"
              @click="isNewPwd = !isNewPwd"
            />
          </template>
        </q-input>
      </div>
      <div class="padding-t-20 padding-r-20 padding-l-20" v-else>
        <q-input
          v-model="ruleForm.phone"
          placeholder="请输入手机号"
          dense
          outlined
          :rules="[val => val && val.length > 0 || '请填写手机号',
                      val => /^1\d{10}$/.test(val) || '请填写正确的手机号']" ref="phoneInput">
          <template v-slot:before>
            <label class="text-right name form-name label-width" >
              <span class="text-red">*</span><span>手机号:</span>
            </label>
          </template>
        </q-input>
        <q-input
          v-model="ruleForm.smsCode"
          placeholder="请输入验证码"
          dense
          outlined
         >
          <template v-slot:before>
            <label class="text-right name form-name label-width" >
              <span class="text-red">*</span><span>验证码:</span>
            </label>
          </template>
          <template v-slot:append>
            <q-btn @click="sendCode" dense flat :label="getCodeBtn" :disable="codeBtnDisable" color="primary"/>
          </template>
        </q-input>
      </div>
    </q-form>
  </basic-dialog>
</template>

<script>
import { changePhone, validatePassword } from '../../../boot/home/user'
import { logout, sendCode } from '../../../boot/login/login'
import { goLoginPage } from '../../../permission'

export default {
  name: 'change-phone-dialog',
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      isNewPwd: true,
      ruleForm: {
        password: '',
        phone: '',
        smsCode: ''
      },
      isPass: true,
      optToken: '',
      getCodeBtn: '获取验证码',
      codeBtnDisable: false
    }
  },
  watch: {
    show (val) {
      if (val) {
        this.isNewPwd = true
        this.isPass = true
        this.codeBtnDisable = false
        Object.assign(this.ruleForm, this.$options.data().ruleForm)
      }
    }
  },
  methods: {
    // 验证密码，必须为长度6-20位
    checkPassword (password) {
      if (password.length < 6 || password.length > 20) {
        return '请输入6-20位密码'
      }
    },
    // 发送验证码
    sendCode () {
      if (!(this.ruleForm.phone && this.ruleForm.phone.length > 0 && /^1\d{10}$/.test(this.ruleForm.phone))) {
        this.$refs.phoneInput.focus()
        return false
      }
      sendCode(this.ruleForm.phone).then(res => {
        this.setCodeBtn(60)
        this.$q.dialog({
          title: `<p class="dialog-notice-title">
<i class="iconfont icontubiao-53" ></i> 发送验证码成功</p>`,
          html: true,
          ok: {
            unelevated: true,
            label: '确认'
          }
        })
      })
    },
    // 获取验证码按钮的倒计时
    setCodeBtn (num) {
      this.codeBtnDisable = true
      setTimeout(() => {
        if (num > 0) {
          this.getCodeBtn = `${num}秒后重新发送`
          this.setCodeBtn(num - 1)
        } else {
          this.getCodeBtn = '获取验证码'
          this.codeBtnDisable = false
        }
      }, 1000)
    },
    submit () {
      this.$refs.form.validate(true).then(result => {
        if (result) {
          if (this.isPass) {
            this.getOptToken()
          } else {
            this.changePhone()
          }
        }
      })
    },
    getOptToken () {
      const params = {
        password: this.ruleForm.password
      }
      validatePassword(params).then(res => {
        if (res.code === '1200') {
          this.optToken = res.data
          this.isPass = false
          this.ruleForm.password = ''
        }
      })
    },
    changePhone () {
      if (this.ruleForm.smsCode.length > 0 && /\d+/.test(this.ruleForm.smsCode)) {
        const params = {
          newPhone: this.ruleForm.phone,
          optToken: this.optToken,
          smsCode: this.ruleForm.smsCode
        }
        changePhone(params).then(() => {
          this.$q.dialog({
            title: `<p class="dialog-notice-title">
<i class="iconfont icontubiao-53" ></i>修改手机号成功，请重新登录</p>`,
            html: true,
            ok: {
              unelevated: true,
              label: '确认'
            }
          }).onOk(() => {
            logout().then(() => {
              goLoginPage()
            })
          })
        })
      } else {
        this.$message.warning('请输入正确验证码')
      }
    }
  }
}
</script>

<style scoped>

</style>
